<template>
	<div class="course-recommendation">
		<!-- 课程推荐标题 -->
		<div class="section-header">
			<div class="section-title">
				<span>课程信息推荐</span>
			</div>
			<div class="section-subtitle">精选优质课程，助力您的学习之旅</div>
		</div>

		<!-- 课程推荐列表 -->
		<div v-if="courseRecommend.length" class="course-list">
			<div class="course-item" v-for="(item, index) in courseRecommend" :key="index"
				@click="toDetail('courseDetail', item)">

				<!-- 正确处理封面图 -->
				<div class="image-container">
					<img class="course-image"
						:src="preHttp(item.coverImageUrl) ? item.coverImageUrl : baseUrl + item.coverImageUrl"
						:alt="item.title" />
					<div class="course-type-tag">{{ item.courseType }}</div>
				</div>

				<!-- 正确绑定课程名与类型 -->
				<div class="course-info">
					<div class="course-name">
						<span class="info-label">课程名称：</span>
						<span class="info-content">{{ item.title }}</span>
					</div>
					<div class="course-meta">
						<span class="info-label">课程类型：</span>
						<span class="info-content">{{ item.courseType }}</span>
					</div>
				</div>
			</div>
		</div>


		<!-- 查看更多按钮 -->
		<div class="view-more-container">
			<div class="view-more" @click="moreBtn('course')">
				<span>查看更多课程</span>
				<i class="icon iconfont icon-gengduo1"></i>
			</div>
		</div>
	</div>
</template>

<script>
import 'animate.css'
import Swiper from "swiper";

export default {
	//数据集合
	data() {
		return {
			baseUrl: '',
			newsList: [],
			courseRecommend: [],
		}
	},
	created() {
		this.baseUrl = this.$config.baseUrl;
		this.getList();
	},
	mounted() {
		window.addEventListener('scroll', this.handleScroll)
		setTimeout(() => {
			this.handleScroll()
		}, 100)

		this.swiperChanges()
	},
	beforeDestroy() {
		window.removeEventListener('scroll', this.handleScroll)
	},
	//方法集合
	methods: {
		swiperChanges() {
			setTimeout(() => {
			}, 750)
		},
		recommendIndexClick12(index, name) {
			this['recommendIndex12' + name] = index
			this.getList()

			document.querySelectorAll('.recommend .list12' + name + ' .list .item').forEach(el => {
				el.classList.remove("active")
			})
			setTimeout(() => {
				document.querySelectorAll('.recommend .list12' + name + ' .list .item').forEach(el => {
					el.classList.add("active")
				})
			}, 1);
		},

		listIndexClick11(index, name) {
			this['listIndex11' + name] = index[this['listColumn11' + name]]
			this.getList()
		},

		handleScroll() {
			let arr = [
				{ id: 'search', css: 'animate__bounce' },
				{ id: 'about', css: 'animate__fadeInUp' },
				{ id: 'system', css: 'animate__fadeInUp' },
				{ id: 'animate_recommendcourse', css: 'animate__fadeInUp' },
				{ id: 'msgs', css: 'animate__bounce' },
				{ id: 'friendly', css: 'animate__bounce' }
			]

			for (let i in arr) {
				let doc = document.getElementById(arr[i].id)
				if (doc) {
					let top = doc.offsetTop
					let win_top = window.innerHeight + window.pageYOffset
					// console.log(top,win_top)
					if (win_top > top && doc.classList.value.indexOf(arr[i].css) < 0) {
						// console.log(doc)
						doc.classList.add(arr[i].css)
					}
				}
			}
		},
		preHttp(str) {
			return str && str.substr(0, 4) == 'http';
		},
		getList() {
			let autoSortUrl = "";
			let data = {}
			autoSortUrl = "course/autoSort";
			if (localStorage.getItem('frontToken')) {
				autoSortUrl = "course/autoSort";
			}
			
			data = {
				page: 1,
				limit: 6,
			}
	
			this.$http.get(this.baseUrl + autoSortUrl, { params: data }).then(res => {
				if (res.data.code == 0) {
					this.courseRecommend = res.data.data.list;
				}
			});

		},
		toDetail(path, item) {
			this.$router.push({ path: '/index/' + path, query: { id: item.id } });
		},
		moreBtn(path) {
			this.$router.push({ path: '/index/' + path });
		}
	}
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.course-recommendation {
	width: 100%;
	padding: 30px 0 40px;
	margin: 0 0 30px;
	background: linear-gradient(135deg, #f9f9f9 0%, #f1f1f1 100%);
	order: 1;
	border-radius: 12px;
	box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05);
}

/* 标题区域 */
.section-header {
	width: 100%;
	margin: 0 auto 40px;
	text-align: center;
}

.section-title {
	position: relative;
	width: 100%;
	line-height: 1.2;
	padding: 20px 0;
	
	span {
		position: relative;
		display: inline-block;
		color: #333;
		font-size: 32px;
		font-weight: 600;
		letter-spacing: 1px;
		
		&:after {
			content: '';
			position: absolute;
			bottom: -10px;
			left: 50%;
			transform: translateX(-50%);
			width: 60px;
			height: 3px;
			background: #F5BB00;
			border-radius: 3px;
		}
	}
}

.section-subtitle {
	color: #666;
	font-size: 16px;
	margin-top: 15px;
	font-weight: 300;
}

/* 课程列表 */
.course-list {
	width: 90%;
	padding: 0 5%;
	background: none;
	height: auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 0 auto;
}

.course-item {
	cursor: pointer;
	width: 30%;
	margin-bottom: 40px;
	overflow: hidden;
	position: relative;
	height: auto;
	transition: all 0.3s ease;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);

	&:hover {
		transform: translateY(-8px);
		box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
	}
}

.image-container {
	width: 100%;
	height: 350px;
	overflow: hidden;
	position: relative;
	border-radius: 10px 10px 0 0;
}

.course-image {
	width: 100%;
	height: auto;
	object-fit: contain;
	display: block;
}

.course-type-tag {
	position: absolute;
	top: 15px;
	right: 15px;
	background: rgba(245, 187, 0, 0.9);
	color: #fff;
	padding: 4px 12px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 500;
	z-index: 2;
}

.course-info {
	padding: 15px 20px;
}

.course-name, .course-meta {
	display: flex;
	align-items: flex-start;
	color: #333;
	font-size: 14px;
	line-height: 1.6;
	margin-bottom: 8px;
}

.info-label {
	color: #666;
	font-weight: 500;
	min-width: 70px;
	flex-shrink: 0;
}

.info-content {
	flex-grow: 1;
	word-break: break-word;
}

.course-name .info-content {
	font-weight: 600;
	font-size: 15px;
}

/* 查看更多按钮 */
.view-more-container {
	width: 100%;
	display: flex;
	justify-content: center;
	margin-top: 20px;
}

.view-more {
	border: 0;
	cursor: pointer;
	border-radius: 30px;
	text-align: center;
	background: #F5BB00;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 25px;
	height: 44px;
	transition: all 0.3s;
	box-shadow: 0 3px 10px rgba(245, 187, 0, 0.3);
	
	&:hover {
		background: darken(#F5BB00, 8%);
		transform: translateY(-2px);
		box-shadow: 0 5px 15px rgba(245, 187, 0, 0.4);
	}

	span {
		color: #fff;
		font-size: 15px;
		font-weight: 500;
	}

	.icon {
		color: #fff;
		font-size: 14px;
		margin-left: 8px;
		transition: transform 0.3s;
	}
	
	&:hover .icon {
		transform: translateX(3px);
	}
}

/* 响应式设计 */
@media (max-width: 992px) {
	.course-item {
		width: 48%;
	}
	
	.section-title span {
		font-size: 28px;
	}
}

@media (max-width: 768px) {
	.course-item {
		width: 100%;
		margin-bottom: 30px;
	}
	
	.section-title span {
		font-size: 24px;
	}
	
	.section-subtitle {
		font-size: 14px;
	}
	
	.course-name, .course-meta {
		font-size: 13px;
	}
	
	.info-label {
		min-width: 60px;
	}
}

.home-preview {
	// -------- search --------
	.search .select /deep/ .el-input__inner {
		border: 1px solid #ddd;
		border-radius: 4px;
		padding: 0 30px 0 10px;
		box-shadow: 0 0 0px rgba(64, 158, 255, .3);
		outline: none;
		color: rgba(64, 158, 255, 1);
		width: 180px;
		font-size: 14px;
		height: 36px;
	}

	.search .input /deep/ .el-input__inner {
		border: 1px solid #ddd;
		border-radius: 4px;
		padding: 0 10px;
		box-shadow: 0 0 0px rgba(64, 158, 255, .3);
		outline: none;
		color: rgba(64, 158, 255, 1);
		width: 180px;
		font-size: 14px;
		height: 36px;
	}
}
</style>